<template>
	<transition name="fade-transform" mode="out-in">
		<main-content
			v-if="!editPage"
			:tableHeight.sync="tableHeight"
			:otherDependenComponents="otherDependenComponents"
		>
			<template slot="query">
				<el-form
					ref="form"
					:inline="true"
					:model="queryData"
					label-width="100px"
				>
					<el-form-item :label="`${$t('common.belong_merchant')}:`">
						<el-select
							v-model="queryData.merchantId"
							size="medium"
							v-symbols
							clearable
							style="width: 180px"
							:placeholder="$t('common.select_all')"
						>
							<el-option
								v-if="isZk"
								:label="`${$t('system.all')}`"
								value="0"
							></el-option>
							<el-option
								v-for="item in merchantList"
								:key="item.id"
								:label="item.merchantName"
								:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="`${$t('system.role_name')}:`">
						<el-input
							v-model="queryData.roleName"
							v-symbols
							clearable
							size="medium"
							style="width: 180px"
							:placeholder="$t('common.please_enter')"
							:maxlength="20"
						></el-input>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							:loading="loading"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							v-if="hasPermission('901011')"
							type="success"
							icon="el-icon-folder-add"
							:disabled="loading"
							size="medium"
							@click="openEdit()"
						>
							{{ $t('common.add') }}
						</el-button>
					</el-form-item>
				</el-form>
			</template>
			<template slot="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="dataList"
					style="width: 100%"
					:max-height="tableHeight"
					highlight-current-row
					:header-cell-style="getRowClass"
				>
					<el-table-column
						type="index"
						align="center"
						:label="$t('common.serial_number')"
						width="100"
					>
						<template slot-scope="scope">
							<span>{{ getSerialNum(scope.$index) }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="roleName"
						align="center"
						:label="`${$t('system.role_name')}`"
					>
						<template slot-scope="scope">
							{{ scope.row.roleName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="remark"
						align="center"
						:label="`${$t('system.role_manage.description')}`"
					>
						<template slot-scope="scope">
							{{ scope.row.remark || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="merchantName"
						align="center"
						:label="`${$t('common.belong_merchant')}`"
					>
						<template slot-scope="scope">
							{{ scope.row.merchantName || '-' }}
						</template>
					</el-table-column>

					<el-table-column
						prop="createBy"
						align="center"
						:label="$t('common.createBy')"
					>
						<template slot-scope="scope">
							{{ scope.row.createBy || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="createdAt"
						align="center"
						:label="$t('common.createAt')"
					>
						<template slot-scope="scope">
							{{ scope.row.createdAt || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						width="180px"
						fixed="right"
						align="center"
						:label="$t('common.actions')"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('901012')"
								type="warning"
								icon="el-icon-edit"
								size="medium"
								@click.stop="openEdit(scope.row)"
							>
								{{ $t('common.edit') }}
							</el-button>
							<el-button
								v-if="hasPermission('901013')"
								type="danger"
								icon="el-icon-delete"
								size="medium"
								@click="deleteUp(scope.row)"
							>
								{{ $t('common.delete') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					v-show="!!total"
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					:pager-count="9"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</template>
		</main-content>
		<editPage
			v-else
			:editData.sync="rowData"
			:is-edit="isEdit"
			@back="back"
		></editPage>
	</transition>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import MainContent from '@/components/MainContent/index.vue'

export default {
	// eslint-disable-next-line vue/name-property-casing
	name: 'roleManage',
	components: {
		editPage: () => import('./components/editPage'),
		MainContent
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				roleName: undefined,
				merchantId: undefined
			},
			dataList: [],
			total: 0,
			rowData: undefined,
			editPage: false,
			isEdit: false
		}
	},
	computed: {
		isZk() {
			return this.$store.getters.isZk
		},
		merchantList() {
			return this.$store.getters.merchantList || []
		}
	},
	methods: {
		loadData() {
			let params = {
				...this.queryData
			}
			params = {
				...this.getParams(params)
			}
			this.loading = true
			this.$api
				.getRoleListPageAPI(params)
				.then((res) => {
					this.loading = false

					const { record, totalRecord } = res.data || {}
					this.dataList = Array.isArray(record)
						? Object.freeze(record)
						: []
					this.total = totalRecord || 0
				})
				.catch(() => (this.loading = false))
		},
		reset() {
			this.$refs['form'].resetFields()
			this.queryData = {
				roleName: undefined,
				merchant: undefined
			}
			this.pageNum = 1
			this.loadData()
		},
		deleteUp(val) {
			const { id } = val
			this.$confirm(`${this.$t('system.role_manage.delete_role')}?`, {
				confirmButtonText: `${this.$t('common.confirm')}`,
				cancelButtonText: `${this.$t('common.cancel')}`,
				type: 'warning'
			})
				.then(() => {
					const loading = this.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					this.$api
						.deleteRoleAPI({ id })
						.then((res) => {
							loading.close()
							if (res?.code === 200) {
								setTimeout(() => {
									this.$message({
										type: 'success',
										message: `${this.$t(
											'common.delete_success'
										)}!`
									})
								}, 3000)
							} else {
								setTimeout(() => {
									this.$message({
										type: 'error',
										message: `${this.$t(
											'common.delete_fail'
										)}!`
									})
								}, 3000)
							}
							this.loadData()
						})
						.catch(() => loading.close())
				})
				.catch(() => {
					this.$message.info(this.$t('common.canceled'))
				})
		},
		openEdit(val) {
			if (val) {
				const { id } = val
				this.rowData = { ...val, id }
				// id && this.getRoleList(id, val)
				this.isEdit = true
			} else {
				this.isEdit = false
				this.rowData = undefined
			}
			this.editPage = true
		},
		// async getRoleList(id, value) {
		// 	const res = await this.$api
		// 		.getRolePermissionsAPI({
		// 			roleId: id
		// 		})
		// 		.catch(() => {
		// 			this.loading = false
		// 		})
		// 	this.loading = false
		// 	if (res?.code === 200) {
		// 		const _arr = []
		// 		res.data?.length &&
		// 			res.data.forEach((item) => {
		// 				if (item.isExist === '1') {
		// 					_arr.push(item.id)
		// 				}
		// 			})
		// 		this.rowData = { ...value, chooseIds: _arr }
		// 	}
		// },
		back() {
			this.editPage = false
			this.loadData()
		},
		formatTime(time) {
			return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
</style>
